<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet 加载 ArcGIS Online 地图</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        // 创建地图实例，使用默认的EPSG:3857 CRS
        var map = L.map('map', {
            center: [39.9042, 116.4074], // 地图中心点 (北京)
            zoom: 4 // 适当的缩放级别
        });

        // 加载 ArcGIS Online 底图 (World Topo Map)
        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
            attribution: '&copy; <a href="https://www.esri.com/">Esri</a>'
        }).addTo(map);

        // 可选：加载 ArcGIS Online 专题图层 (例如：World Imagery)
        var imageryLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: '&copy; <a href="https://www.esri.com/">Esri</a>'
        });

        // 添加图层控制
        var baseMaps = {
            "Topo Map": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
                attribution: '&copy; <a href="https://www.esri.com/">Esri</a>'
            }),
            "Imagery": imageryLayer
        };

        L.control.layers(baseMaps).addTo(map);

    </script>
</body>
</html> 